﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Gola.VN.Scb.Web.Common.Models.UIProductModels >" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>
        <%:  ViewData["Title"]%></title>
    <link rel="Stylesheet" href="/Content/compare/compareProduct.css" type="text/css" />
    <style type="text/css">
        img
        {
            border: none;
        }
        a
        {
            text-decoration: none;
        }
        /*--Making IE6 Understand Fixed Positioning--*/
        *html #fade
        {
            position: absolute;
        }
        *html .popup_block
        {
            position: absolute;
        }
    </style>
    <script type="text/javascript" src="/Scripts/compare/jquery.min.js"></script>
    <script type="text/javascript" src="/Scripts/compare/compareProduct.js"></script>
    <script type="text/javascript">

        function addProduct(navId) {
            var objItemCount = document.getElementById('itemCount');
            if (objItemCount.value >= 4) {
                alert('Bạn chỉ so sánh được tối đa 4 sản phẩm cùng lúc');
                return false;
            }
            if (navId == 0) {
                alert('Bạn phải có ít nhất một sản phẩm để so sánh.');
                return false;
            }
            var popupId = '#popupCompare';
            var popWidth = 900;
            var popHeight = 500;
            var link = "/Product/selectcompare?ids=";
            document.getElementById('popupCompare').innerHTML = "";

            if (navId < 0) {
                navId = document.getElementById('itemCount').value;
            }
            document.getElementById('itemIndex').value = navId;

            // 1. dipslay data in popup
            link = link + getIds(location.href);

            // 2. fade in the Popup and add close button
            $(popupId).fadeIn().css({ 'width': Number(popWidth), 'height': Number(popHeight) }).prepend('<a href="javascript:" class="close"><img src="/Content/Images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a><iframe class="cboxIframe" allowTransparency="yes" src=' + link + '></iframe>');

            // 3. define margin for center alignment (vertical + horizontal)
            var popMargTop = ($(popupId).height() + 80) / 2;
            var popMargLeft = ($(popupId).width() + 80) / 2;

            // 4. Apply Margin to Popup
            $(popupId).css({
                'margin-top': -popMargTop,
                'margin-left': -popMargLeft
            });

            // 5. Fade in Background
            $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
            $('#fade').css({ 'filter': 'alpha(opacity=80)' }).fadeIn(); //Fade in the fade layer 

            return false;
        }
        function removeProduct(navId) {
            intItemCount = document.getElementById('itemCount').value;
            if (intItemCount <= 1) {
                alert('Bạn phải có ít nhất một sản phẩm để so sánh');
                return false;
            }
            objLink = location.href;
            strIds = getIds(objLink);
            arrIds = strIds.split('-');

            objLink = getOriginalLink(objLink);
            arrIds[navId] = '';
            objLink = buildLink(objLink, arrIds);
            document.getElementById('itemCount').value = intItemCount - 1;

            location.href = objLink;

            return false;
        }
    </script>
</head>
<body>
    <div id="warpper">
        <div class="WrContent">
            <div class="subContent compareProducts">
                <div class="break_module">
                </div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <colgroup>
                        <col width="25" />
                        <col width="40" />
                        <col width="40" />
                        <col width="40" />
                        <col width="40" />
                    </colgroup>
                    <thead>
                        <tr class="lkCpn">
                            <th class="addPrd">
                                <a class="poplight" href="javascript:" onclick="addProduct(-1)" rel="popupCompare">Thêm
                                    sản phẩm<span>(Tối đa 4 sản phẩm)</span></a>
                            </th>
                            <%if (Model.Products.Count > 0)
                              { %>
                            <td>
                                <a href="<%:Model.Products[0].View %>">
                                    <%:Model.Products[0].Title%>
                                </a>
                                <div class="actionSt">
                                    <a class="replace" href="javascript:" onclick="addProduct(0)" rel="popupCompare">Thay
                                        thế</a><a class="remove" href="javascript:" onclick="removeProduct(0)">Loại bỏ</a></div>
                            </td>
                            <%}
                              else
                              {%>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 1)
                              { %>
                            <td>
                                <a href="<%:Model.Products[1].View %>">
                                    <%:Model.Products[1].Title%>
                                </a>
                                <div class="actionSt">
                                    <a class="replace" href="javascript:" onclick="addProduct(1)" rel="popupCompare">Thay
                                        thế</a><a class="remove" href="javascript:" onclick="removeProduct(1)">Loại bỏ</a></div>
                            </td>
                            <%}
                              else
                              {%>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 2)
                              { %>
                            <td>
                                <a href="<%:Model.Products[2].View %>">
                                    <%:Model.Products[2].Title%>
                                </a>
                                <div class="actionSt">
                                    <a class="replace" href="javascript:" onclick="addProduct(2)" rel="popupCompare">Thay
                                        thế</a><a class="remove" href="javascript:" onclick="removeProduct(2)">Loại bỏ</a></div>
                            </td>
                            <%}
                              else
                              {%>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 3)
                              { %>
                            <td>
                                <a href="<%:Model.Products[3].View %>">
                                    <%:Model.Products[3].Title%>
                                </a>
                                <div class="actionSt">
                                    <a class="replace" href="javascript:" onclick="addProduct(3)" rel="popupCompare">Thay
                                        thế</a><a class="remove" href="javascript:" onclick="removeProduct(3)">Loại bỏ</a></div>
                            </td>
                            <%}
                              else
                              {%>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="imgCpn">
                            <th>
                                Ảnh
                            </th>
                            <%if (Model.Products.Count > 0)
                              {%>
                            <td>
                                <a href="<%:Model.Products[0].View %>">
                                    <img src="<%:Model.Products[0].ImageUrl %>" width="64px" height="64px" alt="<%:Model.Products[0].Title %>" />
                                </a>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 1)
                              {%>
                            <td>
                                <a href="<%:Model.Products[1].View %>">
                                    <img src="<%:Model.Products[1].ImageUrl %>" width="64px" height="64px" alt="<%:Model.Products[1].Title %>" />
                                </a>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 2)
                              {%>
                            <td>
                                <a href="<%:Model.Products[2].View %>">
                                    <img src="<%:Model.Products[2].ImageUrl %>" width="64px" height="64px" alt="<%:Model.Products[2].Title %>" />
                                </a>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 3)
                              {%>
                            <td>
                                <a href="<%:Model.Products[3].View %>">
                                    <img src="<%:Model.Products[3].ImageUrl %>" width="64px" height="64px" alt="<%:Model.Products[3].Title %>" />
                                </a>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                        </tr>
                        <tr class="priceCpn">
                            <th>
                                Giá bán
                            </th>
                            <%if (Model.Products.Count > 0)
                              { %>
                            <td>
                                <%:Model.Products[0].PriceDisplay%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 1)
                              { %>
                            <td>
                                <%:Model.Products[1].PriceDisplay%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 2)
                              { %>
                            <td>
                                <%:Model.Products[2].PriceDisplay%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 3)
                              { %>
                            <td>
                                <%:Model.Products[3].PriceDisplay%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                        </tr>
                        <tr class="saleOff">
                            <th>
                                Khuyến mãi
                            </th>
                            <%if (Model.Products.Count > 0)
                              { %>
                            <td>
                                <%:MvcHtmlString.Create(Model.Products[0].Promotion)%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 1)
                              { %>
                            <td>
                                <%:MvcHtmlString.Create(Model.Products[1].Promotion)%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 2)
                              { %>
                            <td>
                                <%:MvcHtmlString.Create(Model.Products[2].Promotion)%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 3)
                              { %>
                            <td>
                                <%:MvcHtmlString.Create(Model.Products[3].Promotion)%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                        </tr>
                        <tr class="Descrips">
                            <th>
                                Mô tả
                            </th>
                            <%if (Model.Products.Count > 0)
                              { %>
                            <td>
                                <%:MvcHtmlString.Create(Model.Products[0].Description)%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 1)
                              { %>
                            <td>
                                <%:MvcHtmlString.Create(Model.Products[1].Description)%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 2)
                              { %>
                            <td>
                                <%:MvcHtmlString.Create(Model.Products[2].Description)%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 3)
                              { %>
                            <td>
                                <%:MvcHtmlString.Create(Model.Products[3].Description)%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                        </tr>
                        <tr class="shopCpn">
                            <th>
                                Cửa hàng
                            </th>
                            <%if (Model.Products.Count > 0)
                              { %>
                            <td>
                                <div id="bando" class="provider">
                                    <a href="#?w=800" poplightid='<%:"poplight" +  Model.Products[0].ProviderId.ToString() %>'
                                        class="poplight" rel="product_info">
                                        <%: Model.Products[0].ProdiverName%></a>
                                </div>
                                <%-- <%:Model.Products[0].ProdiverName%>--%>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 1)
                              { %>
                            <td>
                                <div id="Div1" class="provider">
                                    <a href="#?w=800" class="poplight" rel="product_info" poplightid='<%:"poplight" +  Model.Products[1].ProviderId.ToString() %>'>
                                        <%: Model.Products[1].ProdiverName%></a>
                                </div>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 2)
                              { %>
                            <td>
                                <div id="Div2" class="provider">
                                    <a href="#?w=800" class="poplight" rel="product_info" poplightid='<%:"poplight" +  Model.Products[2].ProviderId.ToString() %>'>
                                        <%: Model.Products[2].ProdiverName%></a>
                                </div>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                            <%if (Model.Products.Count > 3)
                              { %>
                            <td>
                                <div id="Div3" class="provider">
                                    <a href="#?w=800" class="poplight" rel="product_info" poplightid='<%:"poplight" +  Model.Products[3].ProviderId.ToString() %>'>
                                        <%: Model.Products[3].ProdiverName%></a>
                                </div>
                            </td>
                            <%}
                              else
                              { %>
                            <td style="display: none">
                                &nbsp;
                            </td>
                            <%} %>
                        </tr>
                    </tbody>
                </table>
            </div>
            <input id="itemCount" value="<%:Model.Products.Count %>" type="hidden" />
            <input id="itemIndex" value="0" type="hidden" />
        </div>
    </div>
    <div id="popupCompare" class="popup_block">
    </div>
    <!--popup product infomation-->
    <div id="product_info" class="popup_block">
    </div>
    <!-- start using diplay gmaps-->
    <%foreach (var locationDetail in Model.ProviderLocations)
      {
          Html.RenderPartial("LocationDetail", locationDetail);
      }
    %>
    <script type="text/javascript">
        $(document).ready(function () {
            // Close Popups and Fade Layer
            $('a.close').live('click', function () { //When clicking on the close or fade layer...
                $('#fade , .popup_block').fadeOut(function () {
                    $('#fade, a.close').remove();
                }); //fade them both out

                return false;
            });
        });
    </script>
</body>
</html>
